<template>
  <div>
    <t-drawer v-model:visible="visible" :header="title" :on-confirm="onConfirm">
      <t-space direction="vertical" size="large" style="width: 100%">
        <t-form
          colon
          preventSubmitDefault
          :showErrorMessage="false"
          labelAlign="left"
          :data="userinfo"
          enctype="multipart/form-data"
        >
          <t-form-item label="姓名" name="name" initial-data="TDesign">
            <t-input v-model="userinfo.username" />
          </t-form-item>
          <t-form-item label="密码" name="password">
            <t-input type="password" v-model="userinfo.password" />
          </t-form-item>
          <t-form-item label="确认密码" name="password">
            <t-input type="password" />
          </t-form-item>
          <t-form-item label="昵称" @click="test" name="alias">
            <t-input />
          </t-form-item>
          <t-form-item label="电话" name="tel">
            <t-input />
          </t-form-item>
          <t-form-item label="邮箱" name="mail">
            <t-input />
          </t-form-item>
          <t-form-item label="头像">
            <t-upload
              action="http://localhost:3000/api/upload"
              theme="image"
              tips="请选择单张图片文件上传"
              accept="image/*"
              v-model="upload.files"
              :size-limit="{ size: 1, unit: 'MB' }"
              @success="success"
            ></t-upload>
          </t-form-item>
        </t-form>
      </t-space>
    </t-drawer>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const visible = defineModel()

import { useUserStore } from '@/stores/users'
import { storeToRefs } from 'pinia'

const store = useUserStore()
const { userinfo } = storeToRefs(store)

var title = store.account.id == 0 ? '用户注册' : '资料修改'

const file = reactive({ url: 'http://localhost:3000' + userinfo.value.thumb })
const upload = reactive({
  files: [file]
})

const onConfirm = () => {
  let action = 'edit'
  if (store.account.id == 0) action = 'regist'
  store.save(action).then((res) => {
    visible.value = false
    if (res.type == 'success') alert('操作成功')
  })
}
const success = (context) => {
  //console.log(context)
  userinfo.value.thumb = context.response.response.url
}
//:format-response="formatResponse"
function formatResponse(res) {
  return res.response.url
}
function test() {
  alert(upload.files[0].url)
}
</script>
